<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>personRegist</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<style>
      #personRegistInfo{
        background:url(../../image/main/info@2x.png) no-repeat center;
        background-size: 100% 100%;
      }
        .aui-list{
              background-color:rgba(255, 255, 255, 0);
        }
        .aui-list .aui-list-item{
          letter-spacing: 2px;
          margin: 0 0 0px 28px;
          height: 56px;
          line-height: 56px;
          font-size: 17px;
          padding-left: 0;
           background-image: -webkit-linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
           background-image: linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
        }
        @media screen and (-webkit-min-device-pixel-ratio: 1.5){
          .aui-list {
              background-image:linear-gradient(90deg,rgba(221, 221, 221, 0),rgba(221, 221, 221, 0) 50%,transparent 50%);
          }
        }
        .getVilidCode{
          float: right;
          text-align: right;
          font-size: 17px;
          color:#969696 !important;
          background-color: rgba(255, 255,255, 0)!important;
          padding-right: 0;
        }
        .rightArrow {
          float: right;
          width: 8px;
          height: 15px;
          margin: 6px 0 0 5px;
        }
         .aui-margin-r-15{
           margin-right: 23px !important;
         }
         .niColor{
           color: #000!important;
         }
         .loninBtnse {
             margin-top: 148px;
         }
         .loninBtn {
             height: 40px!important;
             line-height: 40px!important;
             width: 245px;
             margin: 0 auto;
             background: url(../../image/sure@2x.png) no-repeat center;
             background-size: 100%;
             background-color: rgba(255, 255, 255, 0) !important;
         }
         .aui-btn-info.aui-active, .aui-btn-info:active{
           background-color: transparent !important;
         }
         .identityPic{
            position: absolute;
            right: 52px;
            bottom: 0px;
            width: 81px;
            height: 64px;
         }
         /*适配屏幕320px*/
         @media (max-width: 320px){
           .loninBtnse {
               margin-top: 99px;
           }
           .loninBtn {
               height: 27px!important;
               line-height: 27px!important;
               width: 163px;
           }
            .aui-list .aui-list-item,
            .getVilidCode,
             .exsit{
              font-size: 12px;
            }
            .aui-list .aui-list-item{
              height: 37px;
              line-height: 37px;
            }
            .aui-list .aui-list-item:first-child,
            .aui-list .aui-list-item:last-child {
              height: 47px;
              line-height: 47px;
            }
            .rightArrow {
                width: 5px;
                height: 10px;
                margin: 10px 0 0 5px;
            }
            .identityPic{
              right: 45px;
              bottom: -11px;
            }
       	}
        @media (min-width: 414px) {
            .loninBtn{
              height: 47px!important;
              line-height: 47px!important;
              width: 263px;
            }
          }
         /*适配屏幕320px*/
	</style>
</head>
<body>
  <div id="personRegistInfo" v-bind:style="{height:wHeight}">
    <section class="aui-content aui-margin-t-15">
        <ul class="aui-list aui-form-list ">
            <li class="aui-list-item" v-on:click="editUserNiname()">
              <div class="aui-list-item-label color-orange">
                  姓名
              </div>
                <div class="aui-list-item-label aui-margin-r-15" style="width: 8rem;padding-right: 0;">
                    <div class="aui-btn  getVilidCode" style="width: 8rem;" v-bind:class="{niColor:black1}">
                      {{palcehoderNi1}}
                      <img src="../../image/getin@2x.png" class="rightArrow"/>
                    </div>
                </div>
            </li>
            <li class="aui-list-item" v-on:click="editUserNumber()">
              <div class="aui-list-item-label  color-orange">
                  身份证号
              </div>
                    <div class="aui-list-item-label aui-margin-r-15" style="width: 13rem;padding-right: 0;">
                        <div class="aui-btn  getVilidCode" style="width: 13rem;" v-bind:class="{niColor:black2}" v-show="isShow1">
                          {{palcehoderNi2}}
                           <img src="../../image/getin@2x.png" class="rightArrow"/>
                        </div>
                        <div class="aui-btn  getVilidCode" style="width: 13rem;" v-bind:class="{niColor:black2}" v-show="isShow2">
                           <span v-html="Starstr"></span>
                           <img src="../../image/getin@2x.png" class="rightArrow"/>
                        </div>
                    </div>
            </li>
            <img src="../../image/identity@2x.png" class="identityPic"  v-show="isShow2" />
        </ul>
        <section class="aui-content-padded loninBtnse">
            <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm loninBtn" v-on:click="isComplateIdentity()"></div>
        </section>
    </section>
  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
        api.addEventListener({
            name: 'identityUserName'
        }, function(ret, err) {
            app.palcehoderNi1 = ret.value.NiName;////编辑昵称页面传来昵称
            app.black1 = ret.value.staut;/////编辑昵称页面传来状态
        });
        api.addEventListener({
            name: 'identityUserNumber'
        }, function(ret, err) {
            app.palcehoderNi2 = ret.value.NiName;////编辑身份证号页面传来状态
            app.black2 = ret.value.staut;/////编辑身份证号页面传来状态
        });
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);

    ////初始化页面
    var app = new Vue({
        el: '#personRegistInfo',
        data: {
            wHeight: '',
            palcehoderNi1 : '请输入姓名',/////用户姓名
            palcehoderNi2 : '请输入身份证号',/////用户身份证号
            isShow1 : true,
            isShow2 : '',
            Starstr : '',
            showUserNum : '',
            black1 : false,
            black2 : false
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                this.wHeight = (wh-20) + 'px';
            },
            //////点击修改昵称
            editUserNiname : function(){
                   bf_common_view.bf_win.openWin('identityUserName', '../main/');
            },
            /////点击修改身份证号
            editUserNumber : function(){
                   bf_common_view.bf_win.openWin('identityUserNumber', '../main/');
            },
            isComplateIdentity : function(){
                //  if(this.palcehoderNi2 != ''&& this.palcehoderNi1 != ''){
                    this.Starstr = this.palcehoderNi2;
                    this.showUserNum = this.palcehoderNi2;
                    this.Starstr = this.Starstr.substr(0,3)+'***************';/////显示带星号号码
                    this.isShow2 = true;
                    this.isShow1 = false;
                  // }else{
                  //   bf_common_view.bf_win.popToast("输入不能为空");
                  // }
            }
        },
        mounted:function(){
            this.init();
        }
    });
    var infoMethod = {

    }
</script>
</html>
